<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>组织架构添加</title>
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/footer.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/thesame.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/popCss.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/org/css/org.css}" media="all"/>
	<link rel="stylesheet" th:href="@{/static/css/tree.css}" media="all"/>

	<script th:inline="javascript">var basePath = [[${#httpServletRequest.getContextPath()}]];</script>
	<style type="text/css">
		/*取消选中效果*/
		div{
			-moz-user-select:none;/*火狐*/
			-webkit-user-select:none;/*webkit浏览器*/
			-ms-user-select:none;/*IE10*/
			-khtml-user-select:none;/*早期浏览器*/
			user-select:none;
		}
		mt1_4per{margin-top: 1.4%;}
	</style>
</head>
<body>
<!-- 内容主体区域 -->
<div class="add-title pad25px"><span onclick="returnOrgList()" style="cursor: pointer;" class="mr10px curpointer"><img th:src="@{/static/img/return_icon.png}"></span><span id="actionTitle">新建</span></div>
<div class="new-add-box new-add-box-width bgWhite box-shadows border-radius4">
	<div class="new-add-box-scroll">
		<div class="add-mess add-mess-mb mar25px">
			<input id="addOrgId" type="hidden"/>
			<div class="add-mess-child">
				<div>
					<label><em class="red">*</em>组织名称：</label>
				</div>
				<div class="add-mess-form">
					<p><input id="addOrgName" type="text" style="width: 277px;color: #757575;" onkeyup="value=value.replace(/[~!`?\/<>|@#$%^&*()+_=:]/g,'')" maxlength="20" placeholder="请输入"></p>
				</div>
			</div>
			<div id="treeTwo" class="add-mess-child">
				<div>
					<label><em class="red">*</em>上级组织：</label>
				</div>
				<div class="add-mess-form">
					<p class="add-mess-form-tree"><input type="text" style="color: #757575;" placeholder="请选择" class="form-select" id="selectParentOrg"></p>
					<div class="tree-con-box">
					</div>
				</div>
			</div>
			<div class="add-mess-child">
				<div>
					<label><em class="red">*</em>组织类型：</label>
				</div>
				<div class="add-mess-form">
					<p style="padding-left: 6px;">
						<select id="selectOrgType" style="color: #A6A6A6;" class="form-select" onchange="selected(this)">
							<option value="">请选择</option>
							<option style="color:#757575" th:each="type:${typeList}" th:attr="value=${type.key}" th:text="${type.value}"></option>
						</select>
					</p>
				</div>
			</div>

			<div class="add-mess-child">
				<div>
					<label>地址：</label>
				</div>
				<div class="add-mess-form">
					<p><input id="addAddress" style="width: 277px;color: #757575;" maxlength="50" type="text" onkeyup="value=value.replace(/[~!`?\/<>|@#$%^&*()+_=:]/g,'')" placeholder="请输入"></p>
				</div>
			</div>
		</div>
	</div>
</div>

</div>
<div class="layui-footer layui-footer-one">
	<div class="btn-con textCenter">
		<span class="btn-one" style="cursor: pointer;"  onclick="returnOrgList()">取&nbsp;消</span>
		<span class="btn-two" style="cursor: pointer;"  id="addBtn" onclick="submit()">提&nbsp;交</span>
	</div>
</div>
</body>
<!--组织架构-->
<script type="text/javascript" th:src="@{/static/js/jquery-2.1.3.min.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/layuiCon.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/treeTwo.js}" charset="utf-8"></script>
<script type="text/javascript">

	//layer初始化
	var layer;
	layui.use('layer', function(){
		layer = layui.layer;
	});

	$(function () {
		//添加初始化
		addOrgInit();
		//修改初始化（如果机构不存在，默认跳过）
		editOrgInit();
		layui.use('element', function() {
			var element = layui.element;
		});
	})

	/**
	 * 判断是否空
	 */
	function isNull(value) {
		return value == null || value === "" || value === undefined;
	}

	/**
	 * null转为""
	 */
	function nullFormat(value) {
		if(value == null  || value === undefined){
			return "";
		}else{
			return value;
		}
	}

	/**
	 * 修改初始化
	 */
	function editOrgInit(){
		var orgId = '[[${orgId}]]';

		if(!isNull(orgId)){
			$.ajax({
				type:"post",
				url:basePath+"/org/getOrg",
				dataType:"json",
				data:{"orgId":orgId},
				success:function(rst){
					$("#addOrgId").val('[[${orgId}]]');
					$("#addOrgName").val(rst.data.orgName)
					$("#selectParentOrg").val(rst.msg);
					$("#selectParentOrg").data("orgid",rst.data.parentOrgId);
					$("#selectParentOrg").attr("style","color:#757575;");
					$("#selectOrgType").val(rst.data.type);
					$("#selectOrgType").attr("style","color:#757575;");
					$("#addAddress").val(rst.data.orgAddress);
					$("#actionTitle").html("修改组织");
					$("title").html("组织架构修改");
				}
			})
		}
	}

	/**
	 * 返回列表
	 */
	function returnOrgList(){
		window.location.href=basePath+"/org/listPage";
	}

    /**
	 * 选中修改颜色，保证添加页颜色一致
	 */
	 function selected(obj){
		var val = $(obj).val();
		if(!isNull(val)){
			$(obj).attr("style","color:#757575;");
		}else{
			$(obj).attr("style","color:#A6A6A6;");
		}
	 }

	/**
	 * 添加选择机构-机构
	 */
	function addOrgSelect(obj){
		var name = $(obj).html();
		var orgId = $(obj).data("orgid");
		if(orgId==10){name="/";}
		$("#selectParentOrg").val(name);
		$("#selectParentOrg").data("orgid",orgId);
		$('#treeTwo .tree-con-box').hide();
	}

	/**
	 * 添加组织弹层初始化
	 */
	function addOrgInit(){
		//清空所有填写选择和点击触发
		$("#actionTitle").html("新建组织");
		$.ajax({
			type:"post",
			url:basePath+"/org/getAllOrg",
			dataType:"json",
			success:function(data){
				var str="";
				$.each(data.children,function(index,ao){
					str+='<div onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao.orgId+'" class="border-bot1px pl20px pr20px lh45px gray"><span class="mr10px">'+ao.orgName+'</span><span>无上级组织</span></div>';
					if(ao.isChildExist=='1' && data.children!=null && data.children.length>0){
						str+='<ul class="tree-one">';
						$.each(ao.children,function(index,ao1){
							str+='<li>';
							str+='<div class="tree-children">';
							str+='<div>';
							if(ao1.isChildExist=='1'){
								str+='<p class="tree-arrow cursor"><img src="'+basePath+'/static/org/img/icon_select_down.png"></p>';
								str+='<p onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao1.orgId+'">'+ao1.orgName+'</p>';
							}else{
								str+='<p style="margin-left:17px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao1.orgId+'">'+ao1.orgName+'</p>';
							}
							str+='</div>';
							str+='</div>';
							if(ao1.isChildExist=='1' && ao.children!=null && ao.children.length>0){
								str+='<ul class="tree-two">';
								$.each(ao1.children,function(index,ao2){
									str+='<li>';
									str+='<div class="tree-children">';
									str+='<div>';
									if(ao2.isChildExist=='1'){
										str+='<p class="tree-arrow cursor"><img src="'+basePath+'/static/org/img/icon_select_down.png"></p>';
										str+='<p onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao2.orgId+'">'+ao2.orgName+'</p>';
									}else{
										str+='<p style="margin-left:8px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao2.orgId+'">'+ao2.orgName+'</p>';
									}
									str+='</div>'
									str+='</div>';
									if(ao2.isChildExist=='1' && ao2.children!=null && ao2.children.length>0){
										str+='<ul class="tree-three">';
										$.each(ao2.children,function(index,ao3){
											str+='<li>';
											str+='<div class="tree-children">';
											str+='<div>';
											if(ao3.isChildExist=='1'){
												str+='<p class="tree-arrow cursor"><img src="'+basePath+'/static/org/img/icon_select_down.png"></p>';
												str+='<p onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao3.orgId+'">'+ao3.orgName+'</p>';
											}else{
												str+='<p style="margin-left:8px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao3.orgId+'">'+ao3.orgName+'</p>';
											}
											str+='</div>'
											str+='</div>';
											if(ao3.isChildExist=='1' && ao3.children!=null && ao3.children.length>0){
												str+='<ul class="tree-four">';
												$.each(ao3.children,function(index,ao4){
													str+='<li>';
													str+='<div class="tree-children">';
													str+='<div>';
													str+='<p style="margin-left:8px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="'+ao4.orgId+'">'+ao4.orgName+'</p>';
													str+='</div>'
													str+='</div>';
													str+='</li>';
												})
												str+='</ul>'
											}
											str+='</li>';
										})
										str+='</ul>';
									}
									str+='</li>';
								})
								str+='</ul>';
							}
							str+='</li>';
						});
						str+='</ul>';
					}
					str+='';
				});
				$("#treeTwo .tree-con-box").html(str);
				$("#treeTwo .tree-con-box").hide();
				treeTwoInit();
			}
		})
	}

	/**
	 * 提交
	 */
	function submit(){
		var addOrgId=$("#addOrgId").val();
		var addOrgName=$("#addOrgName").val();
		var selectParentOrg=$("#selectParentOrg").data("orgid");
		var selectOrgType=$("#selectOrgType").val();
		var addAddress=$("#addAddress").val();

		if(isNull(addOrgName)){
			layer.msg("组织名称不能为空！");
			return;
		}
		if(isNull(selectParentOrg)){
			layer.msg("请选择上级组织机构 ！");
			return;
		}
		if(isNull(selectOrgType)){
			layer.msg("请选择组织类型 ！");
			return;
		}

		var args=[];
		args.push(addOrgId);
		args.push(addOrgName);
		args.push(selectParentOrg);
		args.push(selectOrgType);
		args.push(addAddress);

		if(isNull(addOrgId)){
			confirmCon("确认要新建组织吗？",submitCommit, args);
		}else{
			confirmCon("确认要修改组织吗？",submitCommit, args);
		}
	}

	/**
	 * 确认后提交
	 */
	function submitCommit(addOrgId,addOrgName,selectParentOrg,selectOrgType,addAddress){
		// console.log("addOrgId="+addOrgId);
		// console.log("addOrgName="+addOrgName);
		// console.log("selectParentOrg="+selectParentOrg);
		// console.log("selectOrgType="+selectOrgType);
		// console.log("addAddress="+addAddress);
		$.ajax({
			type:"post",
			url:basePath+"/org/cuOrg",
			dataType:"json",
			async: false,
			data:{"orgId":addOrgId,"orgName":addOrgName,"parentOrgId":selectParentOrg,"type":selectOrgType,"orgAddress":addAddress},
			beforeSend: function(){
				$("#addBtn").css("pointer-events", "none");
			},
			success:function(data){
				if(addOrgId==null||addOrgId==""){
					if(data.code==200){
						layer.msg("添加成功", {icon: 1, time:1500},function(){
							window.location.href=basePath+"/org/listPage";
						});
					}else{
						layer.msg(data.msg, {icon: 2, time:1500});
					}
				}else{
					if(data.code==200){
						layer.msg("修改成功", {icon: 1, time:1500},function(){
							window.location.href=basePath+"/org/listPage";
						});
					}else{
						layer.msg(data.msg, {icon: 2, time:1500});
					}
				}
				$("#addBtn").css("pointer-events", "auto");
			}
		})
	}

</script>

</html>
    
 